<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2019年消防年报</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="Copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- 禁用链接高亮 -->
    <meta name="theme-color" content="#2196f3">
    <!-- <link rel="stylesheet" href="/ilink-app-h5-zd/static/img/ilink_1577974866074.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .yearReportTitle {
            flex: 1;
        }

        .font30 {
            font-size: 30px;
            font-weight: bold;
        }

        .font16 {
            font-size: 16px;
            ;
            line-height: 32px;
        }

        .font14 {
            font-size: 14px;
            ;
        }

        .font18 {
            font-size: 18px;
        }

        .font20 {
            font-size: 20px;
        }

        .font50 {
            font-size: 50px;
        }

        .font24 {
            font-size: 24px;
            ;
        }

        .text-c {
            text-align: center;
        }

        .text-l {
            text-align: left;
        }

        .text-r {
            text-align: right;
        }

        .colorYellow {
            color: #FFF66A;
            line-height: 28px;
        }

        .yearReport .link-page-nav {
            background-color: #B14A48;
            display: flex;
            align-items: center;
            height: 38px;
        }

        .yearReport .link-page-nav span {
            text-align: center;
            color: #ffffff;
            font-size: 20px;
            text-indent: -45px;
        }

        .yearReport .page-inner {
            transition: transform 0.5s;
        }

        .yearReport .page-content {
            background-color: #D62727;
            height: calc(100% - 43px);
            background: url(/ilink-app-h5-zd/static/img/ilink_1578389238950.jpg) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .slide-page {
            position: relative;
           height: 95vh;
        }

        .page_1 {
            text-align: center;
        }

        .page_1 .startContentBg,
        .page_2 .startContentBg {
            width: 80%;
            margin-top: 40px;
        }

        .page_2 .startContentBg {
            margin-left: 10%;
            margin-top: 0px;
        }

        .startPageBtn {
            position: absolute;
            display: block;
            left: 50%;
            width: 160px;
            margin-left: -80px;
            bottom: 40px;
            animation: jiggle 2s ease-in infinite;
            display: none;
            
        }

        @keyframes jiggle {

            48%,
            62% {
                transform: scale(1.0, 1.0)
            }

            50% {
                transform: scale(1.1, 0.9)
            }

            56% {
                transform: scale(0.9, 1.1) translate(0, -5px)
            }

            59% {
                transform: scale(1.0, 1.0) translate(0, -3px)
            }
        }

        .page_2_content {
            text-align: left;
            padding: 15px 10%;
        }

        .page_2_content p:nth-child(1),
        .page_2_content p:nth-child(3) {
            font-size: 30px;
            color: #ffffff;
            font-weight: bold;
        }

        .page_2_content p:nth-child(2),
        .page_2_content p:nth-child(4) {
            font-size: 16px;
            color: #ffffff;
        }

        .page_2_content p {
            color: #FFF66A;
            font-size: 14px;
        }

        .page_2_content .page_2_flex {
            text-align: right;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 30px;
            color: #ffffff;
            font-weight: bold;
        }

        .page_2_content p:nth-child(4) {
            text-align: right;
            margin-bottom: 20px;
        }

        .to__led-number {
            display: inline-block;
        }

        .slideIcon {
            animation: slide 1s infinite;
            width: 50px;
            display: none;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            bottom: 40px;
            z-index: 9;
        }

        @keyframes slide {
            0% {
                transform: translate(0px, 0px);
            }

            50% {
                transform: translate(0px, -10px);
            }

            100% {
                transform: translate(0px, 0px);
            }
        }

        /* page3 */
        .page_3,
        .page_4,
        .page_6,
        .page_7,
        .page_8,
        .page_9,
        .page_10,
        .page_11 {
            color: #ffffff;
            padding: 0 10%;
        }

        .page_3_ContentBg {
            width: 80%;
            position: absolute;
            bottom: 100px;
        }

        .flex-start {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        /* 柱状图动画 */
        .category {
            animation: fadeInLeft 3s;
        }

        @keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(-120px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .page_6_img {
            position: fixed;
            right: 10px;
            bottom: 90px;
            display: none;
            width: 240px;
            height: 240px;
            z-index: 1;
            pointer-events: none;
        }

        .page_6_img_1 {
            width: 120px;
            margin-top: 60px;
            margin-left: 60px;
            position: absolute;
            z-index: 2;

        }

        .page_6_img_2 {
            width: 240px;
            position: absolute;
            top: 0;
            right: 0;
            animation: turn 4s linear infinite;
        }

        @media screen and (width: 320px) {
            .page_6_img {
                width: 195px;
                height: 195px;
            }

            .page_6_img_1 {
                width: 98px;
                margin-top: 60px;
                margin-left: 60px;
            }

            .page_6_img_2 {
                width: 195px;
                position: absolute;
                top: 0;
                right: 0;
            }

            .font30 {
                font-size: 28px;
                font-weight: bold;
            }

            .font16 {
                font-size: 14px;
                ;
                line-height: 32px;
            }

            .font14 {
                font-size: 12px;
                ;
            }

            .font18 {
                font-size: 16px;
            }

            .font24 {
                font-size: 22px;
            }
        }

        @keyframes turn {
            0% {
                -webkit-transform: rotate(0deg);
            }

            25% {
                -webkit-transform: rotate(90deg);
            }

            50% {
                -webkit-transform: rotate(180deg);
            }

            75% {
                -webkit-transform: rotate(270deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        .page_7_head {
            position: relative;
            width: 119px;
            margin: 40px auto 10px auto;
        }

        .page_7_head .icon-logo {
            position: absolute;
            top: -35px;
            right: 0;
            width: 55px;
            height: 55px;
        }

        .page_7_head .icon-head {
            width: 119px;
            height: 119px;
            border-radius: 50%;
            border: 1px solid #f34c49;
        }

        #page_7_content {
            display: none;
        }

        .page_8_icon {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }

        .page_8_icon div:nth-child(1) {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #93CF70;
            line-height: 64px;
            animation: textOpacity 5s infinite alternate;
            font-size: 24px;
            margin-top: 40px;
        }

        .page_8_icon div:nth-child(2) {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: #F6AF13;
            line-height: 44px;
            animation: textOpacity 5s 1s infinite alternate;
            font-size: 16px;
        }

        .page_8_icon div:nth-child(3) {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #F06F6F;
            line-height: 50px;
            animation: textOpacity 5s 2s infinite alternate;
            font-size: 18px;
            margin-top: 30px;
        }

        .page_8_icon div:nth-child(4) {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #619EFF;
            line-height: 34px;
            animation: textOpacity 5s 1s infinite alternate;
            font-size: 12px;
            margin-top: 20px;
        }

        @keyframes textOpacity {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.5;
            }

            75% {
                opacity: 0.8;
            }

            100% {
                opacity: 1;
            }
        }

        .page_9_words {
            position: relative;
            background: #F06665;
            border: 1px solid #FCCD62;
            /* padding-top: 76%; */
            margin-bottom: 25px;
        }

        .page_9_words img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .page_9_words img:nth-child(1) {
            animation: textOpacity 2s infinite alternate;
        }

        .page_9_words img:nth-child(2) {
            animation: textOpacity 2s 2s infinite alternate;
        }

        .page_9_words img:nth-child(3) {
            animation: textOpacity 2s 3s infinite alternate;
        }

        .page_9_words_title {
            font-size: 29px;
            color: #FFF66A;
            font-weight: bold;
            text-align: center;
            padding: 40px 0 10px 0;
        }

        .sharePageBtn {
            position: absolute;
            display: block;
            bottom: 40px;
            /* bottom: constant(safe-area-inset-bottom);  */
            /* bottom: env(safe-area-inset-bottom); */
            left: 50%;
            width: 160px;
            margin-left: -80px;
            animation: jiggle 2s ease-in infinite;
        }

        .page_11_content {
            padding-top: 100px;
        }

        .page_11_title {
            padding: 40px 0;
        }
        .playAudio{
            position: fixed;
            right: 5%;
            top: 40px;
            width: 34px;
            height: 34px;
            z-index: 9;
            
        }
      .audioPlayStatus  {
        animation: animationRotate 6s 1s linear infinite; 
        }
        @keyframes animationRotate{
            0%{
            transform: rotate(0deg);  
            }
          
            100%{
                transform: rotate(360deg);  
            }
        }
    </style>
</head>

<body >
    <div class="page yearReport" data-page="yearReport" style="z-index: 2;background-color: #F86F69;">
        <div class="page-content page-box">
            <img src="/ilink-app-h5-zd/static/img/ilink_1577974369449.png" alt="" class="slideIcon" onclick="setActive()">
            <img src="/ilink-app-h5-zd/static/img/ilink_1578635133524.png" class="playAudio " onclick="playAudio()">
            <audio src="/ilink-app-h5-zd/static/img/ilink_1578636140500.mp3" loop  autoplay style="display: none;" id="playAudio">
                
                </audio>
            <div class="page-inner">
                <div class="section slide-page page_1">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1578032182324.png" class="startContentBg">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1577974443427.png" onclick="startFun()"
                        class="startPageBtn">
                </div>
                <div class="section slide-page page_2">
                    <img src="/ilink-app-h5-zd/static/img/ilink_1577974459761.png" class="startContentBg">
                    <div class="page_2_content">
                        <div class="page_2_flex" style="justify-content: flex-start;"> <span id="page_2_times"
                                class="emptyDom aaa" style="display: inline-block;"></span><span id="company_1"></span>
                        </div>
                        <p>这是您加入智慧消防大家庭的时间</p>
                        <div class="page_2_flex"> <span id="page_2_nums" class="emptyDom"
                                style="display: inline-block;"></span><span>数据</span></div>
                        <p id="page_2_nums_des">我们一年为您累积了50000000条</p>
                        <p id="page_2_text"></p>
                    </div>
                </div>
                <div class="section slide-page page_3">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_3_times" class="emptyDom"></div>
                        <div>天</div>
                    </div>
                    <div class="font16" id="safeDes">
                        全年安全运行55天，超过了50.05%的同伴！
                    </div>
                    <div class="font14 colorYellow" id="page_3_text"></div>
                    <div class="flex-start font30">
                        <div class="emptyDom" id="page_3_happen_dom">406</div>
                        <div>个</div>
                    </div>
                    <div class="font16">全年发生警情</div>
                    <div class="flex-start font30">
                        <div class="emptyDom" id="page_3_handle_dom">406</div>
                        <div>个</div>
                    </div>
                    <div class="font16">全年处理警情</div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1577974517193.png" alt="" class="page_3_ContentBg">
                </div>
                <div class="section slide-page page_4">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_4_times_dom" class="emptyDom"></div>
                        <div>个</div>
                    </div>
                    <div class="font16" id="fireSystemDes">

                    </div>
                    <div class="font14 colorYellow" id="page_4_text"></div>
                    <div id="page_4_category" style="width:90%;height:300px;"></div>
                </div>
                <div class="section slide-page page_5">
                    <div class="flex-start font30" style="padding: 20px 10% 0 10%;color: #ffffff;">
                        <div id="page_5_times_dom" class="emptyDom"></div>
                        <div></div>
                    </div>
                    <div class="font16" id="policeHandlingDes" style="padding: 0 10%;color: #ffffff;">

                    </div>
                    <div class="font14 colorYellow" id="page_5_text" style="padding:0 10%"></div>
                    <div style="position: relative;" id="page_5">
                        <div id="page_5_line" style="width:100%;height:200px;margin-top: 30px;"></div>
                        <div id="page_5_1_line" style="width:100%;height:200px;position: absolute;left: 0;top: 2px;">
                        </div>
                    </div>
                </div>
                <div class="section slide-page page_6">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_6_times_dom" class="emptyDom"></div>
                        <div>个</div>
                    </div>
                    <div class="font16" id="maintainDes">

                    </div>
                    <div class="font14 colorYellow" id="page_6_text"></div>
                    <div class="font14 flex-start" style="margin-bottom: 20px;margin-top:20px">
                        <div style="margin-right: 100px;">
                            <div class="flex-start">
                                <div id="page_6_1" class="emptyDom font24">
                                    11111
                                </div>
                                <div>个</div>
                            </div>
                            <div>维保巡查</div>
                        </div>
                        <div>
                            <div class="flex-start">
                                <div id="page_6_2" class="emptyDom font24"></div>
                                <div>个</div>
                            </div>
                            <div>保养</div>
                        </div>
                    </div>
                    <div class="font14">
                        <div>
                            <div>
                                <div class="flex-start">
                                    <div id="page_6_3" class="emptyDom font24">555</div>
                                    <div>个</div>
                                </div>
                                <div>单点测试</div>
                            </div>
                            <div>
                                <div class="flex-start">
                                    <div id="page_6_4" class="emptyDom font24">555</div>
                                    <div>个</div>
                                </div>
                                <div>联动测试</div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="section slide-page page_7">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_7_times_dom" class="emptyDom"></div>
                        <div>%</div>
                    </div>
                    <div class="font16" id="inspectDes">
                        单位全年一共发布了500次巡检任务,完成了95%。展开了6000次点位巡查。
                    </div>
                    <div class="font14 colorYellow" id="page_7_text"></div>
                    <div class="text-c" id="page_7_content">

                    </div>
                </div>
                <div class="section slide-page page_8">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_8_times_dom" class="emptyDom"></div>
                        <div></div>
                    </div>
                    <div class="font16" id="dutyDes">

                    </div>
                    <div class="font14 colorYellow" id="page_8_text"></div>
                    <div class="text-c" id="page_8_content">
                        <div id="page_8_ani">
                            <div>人</div>
                            <div>事</div>
                            <div>物</div>
                            <div>地</div>
                        </div>
                        <div class="text-r">
                            <img src="/ilink-app-h5-zd/static/img/ilink_1577975057682.png" alt=""
                                style="display: none;width: 85%;" id="page_8_bg">
                        </div>
                    </div>
                </div>
                <div class="section slide-page page_9">
                    <div class="page_9_words_title">隐患关键词</div>
                    <div class="page_9_words">
                        <!-- <img src="/ilink-app-h5-zd/static/img/ilink_1577975087857.png" alt="">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1577975105796.png" alt="">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1577975120122.png" alt=""> -->
                        <div id="hotWorld_police" style="width:100%;height:200px"></div>
                    </div>
                    <div class="font30">
                        <div class="flex-start">
                            <div id="page_9_times_dom" class="emptyDom"></div>
                            <div>个</div>
                        </div>
                        <div id="page_9_des" class="font16" style="font-weight: normal;">全年共消灭了38个隐患,平均每50小时处理一个隐患。
                        </div>
                    </div>
                    <div class="font16 colorYellow" id="page_9_text"></div>
                </div>
                <div class="section slide-page page_10">
                    <div class="flex-start font30" style="padding-top: 20px;">
                        <div id="page_10_1_times_dom" class="emptyDom"></div>
                        <div>次</div>
                    </div>
                    <div class="font16" id="studyDes">
                        全年共发布考试60次，累积考试23人次， 平均合格率为77.25%
                    </div>
                    <div class="flex-start font30">
                        <div id="page_10_2_times_dom" class="emptyDom"></div>
                        <div></div>
                    </div>
                    <div class="font16" id="studyTimeDes">
                        2019年员工共学习12345小时，超过了 88%伙伴单位
                    </div>
                    <div class="font14 colorYellow" id="page_10_text"></div>
                    <div class="text-r" style="padding-top: 20px;">
                        <img src="/ilink-app-h5-zd/static/img/ilink_1577975146434.png" alt=""
                            style="display: none;width: 85%;" id="page_10_bg">
                    </div>
                </div>
                <div class="section slide-page page_11">
                    <div class="page_11_content text-c">
                        <div class="font50 page_11_title">2020</div>
                        <div class="font20 page_11_text" id="orgNameDes">我们携手共进<br>坚实守卫A单位消防安全</div>
                    </div>
                    <img src="/ilink-app-h5-zd/static/img/ilink_1577975180851.png" onclick="shareFun()"
                        class="sharePageBtn">
                </div>
            </div>
        </div>
        <div class="page_6_img">
            <img src="/ilink-app-h5-zd/static/img/ilink_1577975229699.png" class="page_6_img_1">
            <img src="/ilink-app-h5-zd/static/img/ilink_1577975243858.png" class="page_6_img_2">
        </div>
    </div>
</body>
<!-- 设置配置文件 -->
<script src="/ilink-fe-config/zhxf-app/config.js?v=202005151646"></script>
<!-- jquery-3.3.1.min.js  -->
<script src="/ilink-app-h5-zd/static/js/rdspFile_1559652823179.js"></script>
<!-- echarts -->
<script src="/ilink-app-h5-zd/static/js/rdspFile_1559652961780.js "></script>
<!-- echarts词云 必须后于echarts引入-->
<script src="/ilink-app-h5-zd/static/img/ilink_1578294306870.js">
</script>
<!-- 语音播报插件 -->
<script src="/ilink-app-h5-zd/static/img/ilink_1577974670913.js">
</script>
<script>
    //如果是给pc端嵌入
    if (!/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && !/(Android)/i.test(navigator.userAgent)) {
        $('.sharePageBtn').hide()
    }

	//接口上下文路径
	var contextPath = CONFIGBOX[CONFIGKEY].proxy;
    var touchStart = 0,//触屏起点
        active = 0,//page index
        maxMove = 50,//偏移最大距离
        textNum = 0,//文字大话index
        orgName,
        page_2_animation_text = '',
        page_3_animation_text = '安全踏实是最值得托付的陪伴，在新的一年每一天都能享受他的陪伴。',
        page_4_animation_text = '每一次的运行数据都会详细记录，</br>每一次的报警都会及时推送。',
        page_5_animation_text = '每一次更及时的处理，都是为了早发现、早到场、早处理。新的一年，我们更早！',
        page_6_animation_text = '定期安排维保任务，可以更有效地保障单位安全！',
        page_7_animation_text = '日积月累、持之以恒的完成日常巡检换来的是防微杜渐、灭隐患于初始。',
        page_8_animation_text = '',
        page_9_animation_text = '比52%的单位都要更快！',
        page_10_animation_text = '好好学习，认真工作；守卫安全，快乐生活！'
    var pageItem = document.getElementsByClassName('slide-page') //3
    var pageBox = document.getElementsByClassName('page-box') //1
    var pageInner = document.getElementsByClassName('page-inner') //2
    var height, headUrl, inspectPersonName, pointCount, total, maxIndex, minIndex, wordsData;
    var wordsDataConcat = []
    $(window).resize(function () {
        if (window != top) {
            var u = navigator.userAgent;
            if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
                height = Number(window.screen.availHeight - 43)
            }else{
                height = Number(document.documentElement.clientHeight)
            }
        } else {
            height = Number(document.documentElement.clientHeight)
        }
        Array.prototype.forEach.call(pageItem, (element, i) => {
            element.style = 'height:' + height + 'px';
        })
        jQuery('.page-box').css({ 'height': height })
    });
    if (window != top) {
        var u = navigator.userAgent;
        if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
            height = Number(window.screen.availHeight - 43)
        }else{
            height = Number(document.documentElement.clientHeight-43)
        }
    } else {
        height = Number(document.documentElement.clientHeight)
    }
    jQuery('.startPageBtn').show()
    var page_2_1_nums, page_3_nums, page_3_1_nums, page_3_2_nums, page_4_nums, page_5_nums, page_6_nums, page_6_1_nums, page_6_2_nums, page_6_3_nums, page_6_4_nums, page_7_nums, page_8_nums, page_9_nums
        , page_10_1_nums, page_10_2_nums
    Array.prototype.forEach.call(pageItem, (element, i) => {
        element.style = 'height:' + height + 'px';
    })
    jQuery('.page-box').css({ 'height': height })
    pageBox[0].addEventListener('touchstart', function (e) {
        touchStart = e.changedTouches[0].clientY
        if (active > 0) { //首页关闭滑动事件
            this.addEventListener('touchmove', touchmovehandle, false)
            this.addEventListener('touchend', touchendhandle, false)
        }
    }, false)
    var u = navigator.userAgent;
    if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
    }else{
        jQuery('.playAudio').addClass('audioPlayStatus')
    }
    //音乐播放
    function playAudio(){
        let media=document.querySelector('#playAudio')
        if(media.paused){
            jQuery('.playAudio').attr('src','/ilink-app-h5-zd/static/img/ilink_1578635133524.png')
            jQuery('.playAudio').addClass('audioPlayStatus')
            media.play()
        }else{
            jQuery('.playAudio').attr('src','/ilink-app-h5-zd/static/img/ilink_1578636317658.png')
            media.pause()
            jQuery('.playAudio').removeClass('audioPlayStatus')
        }
    }
    function xxbubs(str) {
        str = str.replace("f6ae12c1671b4ce48c3f90e9dd9d7608", "");
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
    function shareReport(url, shareTitle, shareContent) {
        parent.native.shareReport(decodeURIComponent(url), shareTitle, shareContent);
    };
    //分享
    function shareFun() {
        shareReport(document.location.href, orgName, "2019年消防年报");
    };
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }
    //获取年报
    function getDetail() {
        var id = getQueryVariable("reportId");
        $.ajax({
            url:location.origin+ "/app/maintainReport/getMaintenanceReportDataForShare?id=" + id,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                let data = JSON.parse(JSON.parse(xxbubs(res.data)));
                // 加入时间
                // jQuery('#company_1').text(data.joinTime.continueTime)
                page_2_1_nums = data.joinTime.continueTimeStr
                page_2_2_nums = data.joinTime.dataCount
                page_2_animation_text = `这是我们为您一年积累的数据，如果换算成《中华人民共和国消防法》,足足有${data.joinTime.fireLawCount}本。`
                jQuery('#page_2_nums_des').text(`我们一年为您累积了${data.joinTime.dataCount}数据`)
                //安全运行
                page_3_nums = data.safeRun.securityDay
                page_3_1_nums = data.safeRun.policeCount
                page_3_2_nums = data.safeRun.dealCount
                jQuery('#safeDes').text(`全年安全运行${data.safeRun.securityDay}天，超过了${data.safeRun.securityPercent}%的同伴！`)
                //消防系统
                page_4_nums = data.fireSystem.equipmentCount
                jQuery('#fireSystemDes').text(`我们接入了${data.fireSystem.systemCount}种消防系统，${data.fireSystem.categoryCount}种设施类别，${data.fireSystem.equipmentCount}个消防设施。`)
                categoryDataX = data.fireSystem.dataList.map(item => {
                    return item.month + '月'
                }).reverse()
                categoryDataY = data.fireSystem.dataList.map(item => {
                    return ((1-item.percent) * 100).toFixed(2)
                }).reverse()
                //警情处理
                page_5_nums = data.policeHandling.avgCountStr
                lineDataX = data.policeHandling.dataList.map((item, index, arr) => {
                    if (index == arr.length - 1) {
                        return item.month + '月'
                    } else {
                        return item.month
                    }
                })
                lineDataY = data.policeHandling.dataList.map(item => {
                    return (item.avgTime / 60 / 60).toFixed(2)
                })
              if(data.policeHandling.avgCount==0){
                jQuery('#policeHandlingDes').text(`全年警情处理速度平均为${data.policeHandling.avgCountStr}。`)
              }else{
                jQuery('#policeHandlingDes').text(`全年警情处理速度平均为${data.policeHandling.avgCountStr}，比${data.policeHandling.percent}%的单位都要更快！`)
              }
                //维保
                page_6_nums = data.maintain.total
                page_6_1_nums = data.maintain.inspectCount
                page_6_2_nums = data.maintain.maintainCount
                page_6_3_nums = data.maintain.singleTestCount
                page_6_4_nums = data.maintain.testCount
                jQuery('#maintainDes').text(`全年共完成维保任务${data.maintain.total}个`)
                //巡检
                page_7_nums = data.inspect.percent
                jQuery('#inspectDes').text(`单位全年一共发布了${data.inspect.total}次巡检任务，完成了${data.inspect.percent}%的巡检任务，展开了${data.inspect.pointCount}次点位巡查。`)
                if (data.inspect.total == 0) {
                    jQuery('#page_7_content').hide()
                } else {
                    headUrl = data.inspect.headUrl;
                    inspectPersonName = data.inspect.inspectPersonName;
                    pointCount = data.inspect.pointCount;
                    total = data.inspect.total;
                }
                //人员值守
                page_8_nums = data.duty.ondutyTimeStr
                page_8_animation_text = `最长的一次持续值守时间达到${data.duty.longstOndutyTimeStr}。时间花在了哪里，收获就在哪里!`
                jQuery('#dutyDes').text(`全年消控室人员值守${data.duty.ondutyTimeStr}`)
                //隐患关键词
                page_9_nums = data.hiddenDanger.total
                jQuery('#page_9_des').text(`全年共消灭了${data.hiddenDanger.total}个隐患，平均每${data.hiddenDanger.avgTime}小时处理一个隐患。`)
                page_9_animation_text = `比${data.hiddenDanger.percent}%的单位都要更快！`
                jQuery('#hiddenDangerDes').text(`全年共消灭了${data.hiddenDanger.total}个隐患,平均每${data.hiddenDanger.avgTime}小时处理一个隐患。`)
                //考试
                page_10_1_nums = data.study.personCount
                page_10_2_nums = data.study.studyCount 
                jQuery('#studyDes').text(` 全年共发布考试${data.study.examCount}次，累积考试${data.study.personCount}人次，平均合格率为${data.study.avgPercent}%`)
                jQuery('#studyTimeDes').text(`2019年员工共学习${page_10_2_nums}，超过了${data.study.percent}%伙伴单位`)
                //last
                orgName = data.orgName
                jQuery('#orgNameDes').html(`我们携手共进<br>坚实守卫${data.orgName}消防安全`)
                setActive(1)
                wordsData = []
                var wordsObj = {}
                if (data.hiddenDanger.word == '') {
                    page_9_animation_text=''
                    jQuery('.page_9_words').hide()
                } else {
                    wordsData = data.hiddenDanger.word.split(',')
                    wordsDataConcat = wordsData.map(item => {
                        return { name: item, value: getRandomNumberByRange(1, 10) }
                    })
                    getWorld()
                }

            }
        });
        //随机数
        function getRandomNumberByRange(start, end) {
            return Math.floor(Math.random() * (end - start) + start)
        }
    }
    //初始化，避免动画未结束，手动滑动其他页
    function initPage() {
        let emptyDom = document.querySelectorAll(".emptyDom")
        Array.prototype.forEach.call(emptyDom, (element, i) => {
            element.innerHTML = ''
        })
        let text = document.getElementById("page_2_text");
        text.innerHTML = ''
    };
    //执行slide翻页
    function setActive(index) {
        if (window != top) {
            var u = navigator.userAgent;
            if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
                height = Number(window.screen.availHeight - 43)
            }else{
                height = Number(document.documentElement.clientHeight-43)
            }
        } else {
            height = Number(document.documentElement.clientHeight)
        }
        if(!index){
            index = active+1
        }
        active = index
        var pageInner = document.getElementsByClassName('page-inner') //2
        pageInner[0].style = 'transform:translate3d(0,-' + height * index + 'px,0)'
        if (active > 0) {
            jQuery('.slideIcon').show()
        } else {
            jQuery('.slideIcon').hide()
        }
        //page2
        var page_2_text_dom = document.getElementById("page_2_text");
        // 数字动画调用
        var page_2_times_dom = document.querySelector("#page_2_times")
        var page_2_nums_dom = document.querySelector("#page_2_nums")
        //page3
        var page_3_times_dom = document.querySelector("#page_3_times")
        initPage()
        var page_2_nums = new Digit({
            number: page_2_2_nums, // 到达指定数值停止滚动
            finish: 3, // 整体完成时间
            speed: 3, // 数值越大，越多数字同时进行翻滚，取值范围（1 ~ 10）
            direction: "right", // 动画方向
            dom: page_2_nums_dom, // 在指定dom节点插入动画
        })
        page_2_nums.render() // page2 
        var page_2_times = new Digit({
            number: page_2_1_nums,
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_2_times_dom,
        })
        page_2_times.render() /// page2 
        //page3
        var page_3_times = new Digit({
            number: page_3_nums,
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_3_times_dom,
        })
        page_3_times.render() /// page3 
        var page_3_haddle_dom = new Digit({
            number: page_3_2_nums,
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_3_handle_dom,
        })
        page_3_haddle_dom.render() /// page3 
        var page_3_happen_nums = new Digit({
            number: page_3_1_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_3_happen_dom,
        })
        page_3_happen_nums.render() /// page3 
        // //page4
        var page_4_times_nums = new Digit({
            number: page_4_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_4_times_dom,
        })
        page_4_times_nums.render() /// page4 
        // //page5
        var page_5_times_nums = new Digit({
            number: page_5_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_5_times_dom,
        })
        page_5_times_nums.render() /// page5
        // //page6
        var page_6_times_nums = new Digit({
            number: page_6_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_times_dom,
        })
        page_6_times_nums.render()
        var page_6_1_d = new Digit({
            number: page_6_1_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_1,
        })
        page_6_1_d.render()
        var page_6_2_d = new Digit({
            number: page_6_2_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_2,
        })
        page_6_2_d.render()
        var page_6_3_d = new Digit({
            number: page_6_3_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_3,
        })
        page_6_3_d.render()
        var page_6_4_d = new Digit({
            number: page_6_4_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_6_4,
        })
        page_6_4_d.render()
        // //page7
        var page_7_times_nums = new Digit({
            number: page_7_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_7_times_dom,
        })
        page_7_times_nums.render()
        // //page8
        var page_8_times_nums = new Digit({
            number: page_8_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_8_times_dom,
        })
        page_8_times_nums.render()
        // //page9
        var page_9_times_nums = new Digit({
            number: page_9_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_9_times_dom,
        })
        page_9_times_nums.render()
        // //page10-1
        var page_10_1_times = new Digit({
            number: page_10_1_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_10_1_times_dom,
        })
        page_10_1_times.render()
        //page10-2
        var page_10_2_times = new Digit({
            number: page_10_2_nums, // 
            finish: 3,
            speed: 3,
            direction: "right",
            dom: page_10_2_times_dom,
        })
        page_10_2_times.render()
        if (active == 1 || active == 2 || active == 3 || active == 4 || active == 5 || active == 6 || active == 7 || active == 8 || active == 9) {
            textNum = 0
            textRun()
        }
        //非当前页 关闭animation动画
        if (active == 3) {
            getCategory()
            // jQuery('#page_4_category').addClass('category')

        } else {
            //jQuery('#page_4_category').removeClass('category')
        }
        if (active == 4) {
            getLine()
            getLineShadow()
            //jQuery('#page_5').addClass('category')
        } else {
            // jQuery('#page_5').removeClass('category')
        }
        if (active == 5) {
            jQuery('.page_6_img').show()
        } else {
            jQuery('.page_6_img').hide()
        }
        if (active == 6) {
            jQuery('#page_7_content').empty()
            if (total != 0 && total != undefined) {
                jQuery('#page_7_content').append(` <div class="page_7_head"><img src="/ilink-app-h5-zd/static/img/ilink_1578018132922.png" class="icon-logo"><img
                                src="${headUrl || '/ilink-app-h5-zd/static/img/ilink_1578026701915.png'} " class="icon-head"></div>
                        <p class="font24">最勤劳的人</p>
                        <p class="font18">${inspectPersonName}</p>
                        <p class="text-l font14">一年领取了${total}次巡检任务，开展了${pointCount}次点位巡查。</p>`)
                setTimeout(res => {
                    jQuery('#page_7_content').slideDown()
                }, 2200)
            }
        } else {
            jQuery('#page_7_content').slideUp()
        }
        if (active == 7) {
            jQuery('#page_8_bg').slideDown('slow')
            jQuery('#page_8_ani').addClass('page_8_icon')
        } else {
            jQuery('#page_8_ani').removeClass('page_8_icon')
            jQuery('#page_8_bg').slideUp('slow')
        }
        if (active == 9) {
            jQuery('#page_10_bg').slideDown('slow')
        } else {
            jQuery('#page_10_bg').slideUp('slow')
        }
        if (active == 10 ) {
            jQuery('.slideIcon').hide()
            jQuery('.yearReport .page-content').css({ 'background': 'url(/ilink-app-h5-zd/static/img/ilink_1578389376100.jpg) no-repeat', 'background-size': '100% 100%' })
            setTimeout(() => {
                jQuery('.page_11_text').slideDown()
            }, 1000);
        } else {
            jQuery('.slideIcon').show()
            jQuery('.page_11_text').slideUp()
            jQuery('.yearReport .page-content').css({ 'background': 'url(/ilink-app-h5-zd/static/img/ilink_1578389238950.jpg) no-repeat', 'background-size': '100% 100%' })
        }
        if(active==0||active == 10){
            jQuery('.slideIcon').hide() 
        }else{
            jQuery('.slideIcon').show()
        }
    };
    //滑动结束
    function touchendhandle() {
        touchStart = 0
        removeEvent()
    };
    //移除
    function removeEvent() {
        var pageBox = document.getElementsByClassName('page-box') //1
        pageBox[0].removeEventListener('touchmove', touchmovehandle)
        pageBox[0].removeEventListener('touchend', touchendhandle)
    };
    //滑动
    function touchmovehandle(e) {
        var pageItem = document.getElementsByClassName('slide-page')
        var clientY = e.changedTouches[0].clientY
        var changeIndex = clientY > touchStart ? -1 : 1
        var pageInner = document.getElementsByClassName('page-inner') //2
        if (Math.abs(clientY - touchStart) > maxMove && active + changeIndex >= 0 && active + changeIndex <= pageItem.length - 1) {
            touchStart = 0
            setActive(active + changeIndex)
            removeEvent()
        }
    };
    //点击开始
    function startFun() {
        getDetail()
    };
    //文字慢慢显示
    function textRun() {
        let dom;
        dom = document.getElementById(`page_${active + 1}_text`);
        if (dom) {
            let insertText = window[`page_${active + 1}_animation_text`]

            dom.innerHTML = insertText.slice(0, textNum)
            var lastText = insertText.slice(textNum)
            if (lastText.indexOf('</br>') === 0) {
                textNum = textNum + 6
            } else {
                textNum++
            }
            if (++textNum <= insertText.length + 1)
                setTimeout(textRun, 80);
        }
    };
    //词云
    function getWorld() {
        let myChart2 = echarts.init(document.getElementById("hotWorld_police"));
        let colorArr = [
            '#ffffff', '#fff8f8', '#fef1f1', '#feeae9', '#fee3e2', '#fddbdb', '#fdd4d4', '#fccdcc',
            '#fcc6c5', '#fcbfbe', '#fbb8b7', '#fbb1af', '#fbaaa8', '#faa2a1', '#fa9b9a', '#fa9492',
            '#f98d8b', '#f98684', '#f97f7d', '#f87875'
        ];
        let option = {
            tooltip: {
                show: false,
                //formatter: function(params) {
                //     let html = `<p><span style="display:inline-block;width:5px;
                //         height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}:共出现${params.value}次</p>`;
                //     return html;
                //   }
            },
            series: [
                {
                    type: "wordCloud",
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: "pentagon",
                    textStyle: {
                        normal: {
                            color: function () {
                                return colorArr[Math.floor(Math.random() * colorArr.length)];
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: "#333"
                        }
                    },
                    data:
                        wordsDataConcat
                }
            ]
        };
        myChart2.setOption(option);
        //  window.onresize = myChart.resize;
    }
    //柱状图
    function getCategory() {
        var myChart = echarts.init(document.getElementById('page_4_category'));
        var option = {
            color: ['#ffffff'],
            title: {
                text: '设备完好性百分比',	// '注册转化漏斗(总体转化率10%)',
                left: 'center',
                top: 20,
                textStyle: { color: '#ffffff' }
            },
            tooltip: {
                trigger: 'axis',
                formatter: function () {
                    return ''
                }
            },
            legend: {
                //['用户数']
                top: 10,
            },
            grid: {
                left: '0%',
                right: '14%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                "axisTick": {       //y轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                "axisLine": {       //y轴
                    "show": false
                },
                axisLabel: {
                    formatter: function () {
                        return ''
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: categoryDataX,
                "axisTick": {       //y轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                "axisLine": {       //y轴
                    "show": false
                },
                axisLabel: {
                    textStyle: { //改变刻度字体样式
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    // name: 'legendData', 	//'用户数',
                    barWidth: 10,		//设置柱子宽度
                    type: 'bar',
                    data: categoryDataY,
                    itemStyle: {        //上方显示数值
                        normal: {
                            color: ['#92B8F5'],
                            barBorderRadius: 10,
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                formatter: '{c}%',
                                textStyle: { //数值样式
                                    color: '#FFD25A',
                                    fontSize: 12
                                }
                            }
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
    };
    //折线图
    function getLine() {;
        var myChartLine = echarts.init(document.getElementById('page_5_line'));
        var option = {
            color: ['#ffffff'],
            title: {
                text: '平均处理时间',
                left: 'center',
                top: 0,
                textStyle: { color: '#ffffff' }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: ''
                },
                formatter: function (params) {
                    return `${params[0].axisValue}月:${params[0].data}小时`
                }
            },
            legend: {
                top: 10,
            },
            grid: {
                left: 14,
                right: 14,
                bottom: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: [0, 0.01],
                "axisTick": {
                    "show": false
                },
                "splitLine": {
                    "show": false
                },
                "axisLine": {
                    "show": false
                },
                axisLabel: {
                    textStyle: { //改变刻度字体样式
                        color: '#fff',
                        fontSize:9
                    },
                },
                data: lineDataX
            },
            yAxis: {
                type: 'value',
                "axisTick": {       //y轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                "axisLine": {       //y轴
                    "show": false
                },
                axisLabel: {
                    formatter: function (params) {
                        return ''
                    }
                }
            },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    lineStyle: {
                        normal: {
                            color: "#92B8F5", // 线条颜色
                        },
                    },
                    symbolSize: function (value, params) {
                        let arr = lineDataY
                        maxIndex = arr.indexOf(Math.max(...arr).toFixed(2))
                        minIndex = arr.indexOf(Math.min(...arr).toFixed(2))
                        if (maxIndex == 0 && minIndex == 0) {
                            return 0
                        } else {
                            if (params.dataIndex == maxIndex || params.dataIndex == minIndex) {
                                return 8
                            } else {
                                return 0
                            }
                        }
                    },
                    markPoint: {
                        symbolOffset: [0, -15],
                        symbolSize: 0.01,
                        data: [{
                            name: '最大值', type: 'max', itemStyle: {
                                normal: {
                                    label: {
                                        formatter: function (params) {
                                            if (maxIndex == 0 && minIndex == 0) {
                                                return ''
                                            }
                                            return '最慢' + params.value + '小时'
                                        },
                                        textStyle: { color: '#FFF66A', }
                                    },
                                }
                            }
                        }, {
                            name: '最小值', type: 'min',
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: function (params) {
                                            if (maxIndex == 0 && minIndex == 0) {
                                                return ''
                                            }
                                            return '最快' + params.value + '小时'
                                        },
                                        textStyle: { color: '#FFF66A', }
                                    }
                                }
                            }
                        }]
                    },
                    data: lineDataY,
                    itemStyle: {
                        normal: {
                            color: "#ffffff",
                            borderWidth: 8,
                            borderColor: 'rgba(255,255,255,.3)',
                            label: {
                                show: false, //开启显示
                                position: 'right', //在右方显示
                                textStyle: { //数值样式
                                    color: '#FFD25A',
                                    fontSize: 12
                                }
                            }
                        }
                    }
                },

            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartLine.clear();
        myChartLine.setOption(option);
    };
    //阴影折线
    function getLineShadow() {;
        var myChartLine1 = echarts.init(document.getElementById('page_5_1_line'));
        var option = {
            grid: {
                left: 14,
                right: 14,
                bottom: '0%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                "axisTick": {       //y轴刻度线
                    "show": false
                },
                "splitLine": {     //网格线
                    "show": false
                },
                "axisLine": {       //y轴
                    "show": false
                },
                axisLabel: {
                    formatter: function (params) {
                        return ''
                    }
                }
            },
            xAxis: {
                type: 'category',
                "show": false,
                data: lineDataX
            },
            series: [
                {
                    type: 'line',
                    data: lineDataY,
                    symbol: 'circle',
                    smooth: true,
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: "#d03e3c", // 线条颜色
                        },
                    },
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChartLine1.clear();
        myChartLine1.setOption(option);
    }
        //},

    //}
</script>
</html>